<template>
  <div class="home-container">
    <a-row :gutter="16">
      <a-col :span="24">
        <a-card class="welcome-card">
          <template #cover>
            <div class="banner">
              <img
                src="../assets/hhoj-logo.png"
                alt="黄海学院Logo"
                class="logo"
              />
              <h1>黄海学院在线判题系统</h1>
            </div>
          </template>
          <a-typography-title :heading="3"> 欢迎使用黄海OJ </a-typography-title>
          <a-typography-paragraph>
            黄海OJ是黄海学院信息科学与工程学院专为计算机专业学生打造的在线编程训练平台。
            本系统提供丰富的编程题目、实时评测功能和排名系统，帮助学生提升编程能力、算法思维和解决问题的能力。
          </a-typography-paragraph>
          <a-space>
            <a-button type="primary" size="large" @click="goToQuestions">
              开始刷题
            </a-button>
            <a-button size="large" @click="goToRanking"> 查看排名 </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 20px">
      <a-col :span="16">
        <a-card class="intro-card">
          <a-typography-title :heading="4">
            <icon-school /> 黄海学院简介
          </a-typography-title>
          <a-typography-paragraph>
            校创建于1996年，前身为山东省经济职工中专学校黄海分校。2000年，更名为青岛经济技术开发区黄海职业学校。2001年，更名为青岛经济技术开发区黄海职业专修学院。2002年，更名为青岛黄海职业专修学院。2003年经山东省人民政府批准为普通高等专科学校，同年更名为青岛黄海职业学院。2011年，青岛黄海职业学院晋升为普通本科高校，更名为青岛黄海学院。2017年，通过教育部普通高等学校本科教学工作合格评估。2022年，获批山东省应用型本科高校建设支持单位。2023年，获批山东省智慧教育示范校创建单位。学校曾获全国示范学习服务中心、全国先进社会组织、首届黄炎培优秀学校、首批全国跨境电商专业人才培养示范校、全国学雷锋基地先进单位、山东省先进基层党组织、山东教育系统先进基层党组织、齐鲁诗教先进单位等荣誉。
          </a-typography-paragraph>
          <a-typography-paragraph>
            学校坐落在素有北方第三大城之称的青岛市，深度嵌入青岛经济技术开发区，校园占地面积1000余亩，环境优美，设施完善，是读书治学的理想场所。
          </a-typography-paragraph>

          <a-divider />

          <a-typography-title :heading="4">
            <icon-computer /> 信息科学与工程学院
          </a-typography-title>
          <a-typography-paragraph>
            信息科学与工程学院是黄海学院重点学院之一，设有计算机科学与技术、软件工程、网络工程、物联网工程等专业，拥有一支高水平的师资队伍和先进的实验设备。
          </a-typography-paragraph>
          <a-typography-paragraph>
            学院注重培养学生的创新能力和实践能力，积极组织学生参加各类科技竞赛，如ACM程序设计大赛、蓝桥杯大赛等，取得了优异成绩。本OJ平台正是为了进一步提升学生的编程能力而开发的。
          </a-typography-paragraph>
        </a-card>
      </a-col>

      <a-col :span="8">
        <a-card class="feature-card">
          <a-typography-title :heading="4">
            <icon-apps /> 系统特点
          </a-typography-title>
          <a-list :bordered="false">
            <a-list-item>
              <a-typography-text>
                <icon-check-circle style="color: #52c41a; margin-right: 8px" />
                多语言支持：Java、C++、Python等
              </a-typography-text>
            </a-list-item>
            <a-list-item>
              <a-typography-text>
                <icon-check-circle style="color: #52c41a; margin-right: 8px" />
                实时评测：快速获取代码运行结果
              </a-typography-text>
            </a-list-item>
            <a-list-item>
              <a-typography-text>
                <icon-check-circle style="color: #52c41a; margin-right: 8px" />
                丰富题库：覆盖各类算法和数据结构
              </a-typography-text>
            </a-list-item>
            <a-list-item>
              <a-typography-text>
                <icon-check-circle style="color: #52c41a; margin-right: 8px" />
                排名系统：激励学习，展示成果
              </a-typography-text>
            </a-list-item>
            <a-list-item>
              <a-typography-text>
                <icon-check-circle style="color: #52c41a; margin-right: 8px" />
                安全沙箱：保障代码运行环境安全
              </a-typography-text>
            </a-list-item>
          </a-list>

          <a-divider />

          <a-typography-title :heading="4">
            <icon-calendar /> 近期活动
          </a-typography-title>
          <a-list :bordered="false">
            <a-list-item>
              <a-typography-text> 校内程序设计大赛报名中 </a-typography-text>
            </a-list-item>
            <a-list-item>
              <a-typography-text> 每周算法专题训练营 </a-typography-text>
            </a-list-item>
            <a-list-item>
              <a-typography-text> ACM集训队选拔赛 </a-typography-text>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

const goToQuestions = () => {
  router.push("/questions");
};

const goToRanking = () => {
  // 如果有排名页面，可以跳转到对应路由
  // 暂时跳转到题目页
  router.push("/questions");
};
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.banner {
  height: 200px;
  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 20px;
}

.logo {
  height: 80px;
  margin-bottom: 16px;
}

.banner h1 {
  font-size: 28px;
  color: white;
  margin: 0;
}

.intro-card,
.feature-card {
  height: 100%;
}
</style>
